<ActivityView v-deep>
    <ActivityTitle is-app-title v-deep :inert="(page > 1 && page < 100)">写标签</ActivityTitle>
    <style>[inert]>>>{opacity: 0.5;}</style>
    <ActivityBody style="display: flex; flex-direction: column;">
        <dialog v-deep  @cancel.prevent @keydown.esc.prevent class="my-select-dialog" ref="keySelector">
            <KeyReflect @selected="work" :required="false" />
        </dialog>
        <dialog v-deep style="padding: 0; min-width: 50%;" @cancel.prevent @keydown.esc.prevent ref="sectorSelector">
            <ActivityView>
                <ActivityTitle>选择要写入的扇区</ActivityTitle>
                <ActivityBody style="padding: 1em; overflow: hidden;">
                    <div><ElCheckbox v-model="writeSectorAll">全选</ElCheckbox></div>
                    <div style="flex: 1; overflow: auto; margin: 0.5em 0; " v-show="!writeSectorAll">
                        <div v-for="i in writeSectorCount">
                            <ElCheckbox :disabled="writeSectorAll" v-model="writeSectors[i-1]">扇区 {{i-1}}</ElCheckbox>
                        </div>
                    </div>
                    <div><ElCheckbox v-model="writeDump.b0">启用块0写入</ElCheckbox></div>
                    <div><ElCheckbox v-model="writeDump.nobcc">跳过BCC校验 (强烈不建议)</ElCheckbox></div>
                    <div v-if="writeDump.nobcc" style="color: red; margin-bottom: 0.5em;">向标签中写入错误的BCC数据将会<b>永久</b>破坏该标签！请确保你知道你在做什么！</div>
                    <div style="display: flex;">
                        <ElButton v-if="writeDump.nobcc" style="flex: 1;" type="danger" plain @click="selectsector(1)">我知道我在做什么</ElButton>
                        <ElButton v-else style="flex: 1;" type="success" plain @click="selectsector(1)">继续</ElButton>
                        <ElButton style="flex: 1;" type="danger" plain @click="selectsector(0)">取消</ElButton>
                    </div>
                </ActivityBody>
            </ActivityView>
        </dialog>
        <ElCollapse v-if="page === 1" v-deep v-model="writePage" accordion>
            <ElCollapseItem title="写块" name="block" v-show="false">
                <div v-deep class="input-area"><span>扇区:</span><ElInput style="margin-left: 0.5em;" type="number" v-model="writeBlock.sector" :min="0" :max="255" /></div>
                <div v-deep class="input-area"><span>块  :</span><ElInput style="margin-left: 0.5em;" type="number" v-model="writeBlock.block" :min="0" :max="15" /></div>
                <div v-deep class="input-area"><span>值 (十六进制):</span><ElInput style="margin: 0 0.5em; flex: 1;" v-model="writeBlock.value" maxlength="32" show-word-limit :formatter="(value) => value.toUpperCase().replaceAll(/([\u0000-\u002f]|[\u003a-\u0040]|[\u0047-\uffff])/g, '')" /><span :style="{color:(writeBlock.value?.length===32?'#00aa00':'red')}">{{writeBlock.value?.length}} / 32</span></div>
                <div v-deep class="input-area"><ElButton :disabled="writeBlock.value?.length !== 32" style="flex: 1;" type="primary" plain @click="run('executeWriteBlock')">开始写入</ElButton></div>
            </ElCollapseItem>

            <ElCollapseItem title="写入转储文件" name="dump">
                <div v-deep class="input-area">
                    <span>转储文件:</span>
                    <ElSelect v-model="writeDump.file" style="margin: 0 0.5em; flex: 1;">
                        <ElOption v-for="item in (writeDump.files)" :value="item">{{item}}</ElOption>
                    </ElSelect>
                    <ElButton @click="loadDumpfileList">重新加载文件列表</ElButton>
                </div>
                <div v-deep class="input-area">
                    <ElButton style="flex: 1;" type="primary" plain @click="run('executeWriteDump')">开始写入</ElButton>
                    <ElButton @click="executeWriteDump({uid: true})">UID卡直接写入</ElButton>
                </div>
            </ElCollapseItem>

            <ElCollapseItem title="格式化" name="format">
                <div v-deep class="input-area">尝试将标签格式化为工厂/交付状态</div>
                <div v-deep class="input-area">
                    <ElButton style="flex: 1;" type="primary" plain @click="run('executeFormat')">开始格式化</ElButton>
                    <ElButton @click="executeFormat('uid')">直接格UID</ElButton>
                    <ElTooltip :content="'将全卡清空并重新初始化。\r\n可用于ACbit损坏/KEY全部被改等情况的急救。'">
                        <ElButton @click="executeFormat('uidreset')">清空并重置UID</ElButton>
                    </ElTooltip>
                </div>
            </ElCollapseItem>

            <ElCollapseItem title="锁定UFUID标签 (beta)" name="lock_ufuid">
                <div v-deep class="input-area">尝试锁定 UFUID 标签，锁定后标签 Block 0 数据无法再更改</div>
                <div v-deep class="input-area">
                    <ElButton style="flex: 1;" type="primary" plain @click="executeLockUfuid">开始执行</ElButton>
                </div>
            </ElCollapseItem>

            <ElCollapseItem title="设置标签 UID" name="setuid">
                <div v-deep class="input-area">注意：此选项仅对支持更改uid的标签（magic card; UID; CUID; FUID; UFUID）有效</div>
                <div v-deep class="input-area"><span>新 UID:</span><ElInput style="margin-left: 0.5em;flex: 1;" v-model="writeUid" /><ElButton @click="readSetUid" style="margin-left: 0.5em;">读取现有标签的UID (克隆)</ElButton></div>
                <div v-deep class="input-area">
                    <ElButton style="flex: 1;" type="primary" plain @click="executeSetUid(true)">开始执行 (UID/UFUID)</ElButton>
                    <ElButton style="flex: 1;" type="primary" plain @click="run('executeSetUid')">开始执行 (CUID/FUID)</ElButton>
                </div>
            </ElCollapseItem>

            <ElCollapseItem title="复制(克隆)标签" name="clonetag">
                <div v-deep class="input-area">操作步骤：</div>
                <ol>
                    <li><a href="#" @click.prevent="writePage = 'setuid'">展开“设置标签UID”</a></li>
                    <li>点击“读取现有标签的UID”</li>
                    <li>根据目标标签类型点击开始执行按钮，进行UID的克隆</li>
                    <li>返回主页，点击“读标签”，读取原标签</li>
                    <li>标签读取完成后点击“...”，然后点击“将此转储写入其他标签”，写入标签内容</li>
                </ol>
            </ElCollapseItem>

            <ElCollapseItem title="批量操作" name="multiple">
                <div v-deep class="input-area"><a target="_blank" href="#/logs/?closeless=1&catalog=Batch" @click.prevent="openLogViewer('Batch')"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 1em; height: 1em; margin-right: 0.5em"><path d="M938.666667 128a42.666667 42.666667 0 0 0-42.666667-42.666667h-298.666667a42.666667 42.666667 0 0 0 0 85.333334h195.669334l-268.501334 268.501333a42.666667 42.666667 0 0 0 60.330667 60.330667L853.333333 230.997333V426.666667a42.666667 42.666667 0 1 0 85.333334 0V128z" fill="#2B2F36"></path><path d="M170.666667 213.333333h256v85.333334H170.666667v554.666666h682.666666v-234.666666h85.333334V853.333333a85.333333 85.333333 0 0 1-85.333334 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V298.666667a85.333333 85.333333 0 0 1 85.333334-85.333334z" fill="#2B2F36"></path></svg>操作日志</a></div>

                <ElFormItem label="操作类型">
                    <ElRadio v-model="multi.op_type" value="write">将转储文件写入到标签 (即将推出)</ElRadio>
                    <ElRadio v-model="multi.op_type" value="format">格式化</ElRadio>
                    <ElRadio v-model="multi.op_type" value="setid">设置 ID (即将推出)</ElRadio>
                </ElFormItem>

                <div v-if="multi.op_type === 'write'">
                    <div><small>写转储</small></div>
                    upcoming
                </div>
                <div v-if="multi.op_type === 'format'">
                    <div><small>格式化</small></div>
                    <div style="margin-top: 0.5em;">是否为UID/UFUID: <ElCheckbox v-model="multi.f_isUid"></ElCheckbox></div>
                    <div style="margin-top: 0.5em;" v-if="!multi.f_isUid">密钥文件: <span>{{userkeyfile.length}}</span> 个已选 &nbsp; <a href="#" @click.prevent="multi_f_sk">选择...</a></div>
                </div>

                <div style="margin-top: 0.5em; display: flex; flex-direction: column;">
                    <ElButton @click="multi_run()" type="primary" plain>开始执行</ElButton>
                </div>
            </ElCollapseItem>

            <!-- <ElCollapseItem title="增减值块" name="crease">
            </ElCollapseItem> -->

            <style>
            [v-deep] .el-collapse-item__content {
                --el-collapse-content-font-size: initial;
            }
            </style>
        </ElCollapse>
        <template v-if="(!multi.isRun) && (page === 2)">
            <div>已选择 {{userkeyfile.length}} 个密钥文件</div>
            <div><b>已发送请求，正在等待服务器响应...</b></div>
        </template>
        <template v-if="(!multi.isRun) && ((page === 3 || page === 9999) || (page >= 10001 && page < 11000))">
            <div style="display: flex; align-items: center; justify-content: center; border-bottom: 1px solid; padding-bottom: 0.5em; margin-bottom: 1em;">
                <span v-if="page === 3">已选择 {{userkeyfile.length}} 个密钥文件</span>
                <div style="font-size: x-large; color: green;" v-if="page === 9999">标签写入成功!</div>
                <ElButton type="success" plain @click="doneWrite" v-if="page === 9999" style="margin-left: 0.5em;">完成</ElButton>
                <ElButton text size="small" @click="show_advanced = false" v-if="show_advanced" style="margin-left: 0.5em;">显示更少...</ElButton>
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;" v-show="show_advanced">
                <ElProgress :text-inside="true" :stroke-width="25" :percentage="write_percent" status="success" v-if="show_advanced" />
                <div style="border: 1px solid; border-radius: 10px; padding: 10px; overflow: auto; white-space: pre; flex: 1; margin-top: 0.5em;" ref="logDiv">
                    <div style="position: sticky; top: 0; left: 0; background-color: #fff; margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid gray;">操作日志</div>
                </div>
            </div>
            <div v-if="(page >= 10001 && page < 11000) && (!show_advanced)" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                <div style="color: red; font-size: x-large; text-align: center; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px solid;">出现错误！(错误代码：{{page}}) <ElButton text @click="retryAction">重试</ElButton><ElButton text size="small" @click="show_advanced = true">显示日志</ElButton></div>
                <div v-text="error分析" style="white-space: pre; font-weight: bold;"></div>
                <div style="margin-top: 1em; padding-top: 0.5em; border-top: 1px solid;">问题详细信息:</div>
                <div v-text="errorText" style="flex: 1; overflow: auto; white-space: pre;"></div>
            </div>
            <div style="flex: 1; display: grid; place-items: center;" v-if="!show_advanced && (!(page >= 10001 && page < 11000))">
                <div style="text-align: center;">
                    <div style="margin-bottom: 1em;" v-if="page === 3">正在写入标签...</div>
                    <div style="margin-bottom: 0.5em; font-size: x-large; color: green;" v-if="page === 9999">标签写入成功!</div>
                    <div style="margin-bottom: 1em; user-select: none;" v-if="page === 9999">写入块: <span style="user-select: all;">{{writeSectorWritten}} / {{writeSectorToWrite}}</span></div>
                    <ElProgress type="circle" :percentage="write_percent" :status="write_percent >= 100 ? 'success' : undefined" />
                    <div style="margin-top: 1em;"><ElButton type="success" plain @click="doneWrite" v-if="page === 9999">完成</ElButton></div>
                    <div style="margin-top: 1em;"><ElButton text size="small" @click="show_advanced = true">显示更多...</ElButton></div>
                </div>
            </div>
        </template>
        <template v-if="multi.isRun">
            <div>批量运行中<a href="#" style="margin-left: 0.5em;" @click.prevent="multi_cancel">修改配置</a></div>
            <template v-if="multi.op_type === 'format'">
                <div>类型: <span>格式化</span> | <span v-if="multi.f_isUid">写入UID/UFUID不需要密钥文件</span><span v-else>密钥文件: <span>{{userkeyfile.length}} 个</span></span></div>
                <div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid gray; padding: 10px; overflow: auto; border-radius: 10px; margin-top: 0.5em;">
                    <div class="stat-unconnect" v-if="multi.stat === 0"><div style="font-size: x-large;">将标签放在设备上</div></div>
                    <div class="stat-running" style="width: 100%; overflow: auto;" v-if="multi.stat === 1 && page !== 9999">
                        <div v-show="show_advanced" style="display: flex; align-items: center; justify-content: center; border-bottom: 1px solid; padding-bottom: 0.5em; margin-bottom: 1em;">
                            <span v-if="page === 3">已选择 {{userkeyfile.length}} 个密钥文件</span>
                            <div style="font-size: x-large; color: green;" v-if="page === 9999">标签写入成功!</div>
                            <ElButton type="success" plain @click="doneWrite" v-if="page === 9999" style="margin-left: 0.5em;">完成</ElButton>
                            <ElButton text size="small" @click="show_advanced = false" v-if="show_advanced" style="margin-left: 0.5em;">显示更少...</ElButton>
                        </div>
                        <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;" v-show="show_advanced">
                            <ElProgress :text-inside="true" :stroke-width="25" :percentage="write_percent" status="success" v-if="show_advanced" />
                            <div style="border: 1px solid; border-radius: 10px; padding: 10px; overflow: auto; white-space: pre; flex: 1; margin-top: 0.5em;" ref="logDiv">
                                <div style="position: sticky; top: 0; left: 0; background-color: #fff; margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid gray;">操作日志</div>
                            </div>
                        </div>
                        <div v-if="(page >= 10001 && page < 11000) && (!show_advanced)" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                            <div style="color: red; font-size: x-large; text-align: center; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px solid;">出现错误！(错误代码：{{page}}) <ElButton text @click="retryAction">重试</ElButton><ElButton text size="small" @click="show_advanced = true">显示日志</ElButton></div>
                            <div v-text="error分析" style="white-space: pre; font-weight: bold;"></div>
                            <div style="margin-top: 1em; padding-top: 0.5em; border-top: 1px solid;">问题详细信息:</div>
                            <div v-text="errorText" style="flex: 1; overflow: auto; white-space: pre;"></div>
                        </div>
                        <div style="flex: 1; display: grid; place-items: center;" v-if="!show_advanced && (!(page >= 10001 && page < 11000))">
                            <div style="text-align: center;">
                                <div style="margin-bottom: 1em;" v-if="page === 3">正在写入标签...</div>
                                <div style="margin-bottom: 0.5em; font-size: x-large; color: green;" v-if="page === 9999">标签写入成功!</div>
                                <div style="margin-bottom: 1em; user-select: none;" v-if="page === 9999">写入块: <span style="user-select: all;">{{writeSectorWritten}} / {{writeSectorToWrite}}</span></div>
                                <ElProgress type="circle" :percentage="write_percent" :status="write_percent >= 100 ? 'success' : undefined" />
                                <div style="margin-top: 1em;"><ElButton type="success" plain @click="doneWrite" v-if="page === 9999">完成</ElButton></div>
                                <div style="margin-top: 1em;"><ElButton text size="small" @click="show_advanced = true">显示更多...</ElButton></div>
                            </div>
                        </div>
                    </div>
                    <div class="stat-running" v-if="multi.stat === 1 && page === 9999">
                        <div style="font-size: x-large;">完成</div>
                    </div>
                </div>
            </template>
            <div v-deep class="multi-status-bar" style="margin-top: 0.5em;">
                <span v-deep class="multi-status-item">成功: <span v-text="multi.sc"></span></span>
                <span v-deep class="multi-status-item">失败: <span v-text="multi.fc"></span></span>
                <span v-deep class="multi-status-item" hidden="reason: //TODO">记录到日志: <input type="checkbox" v-model="multi.enable_log" /> {{multi.log_name}}</span>
                <span v-deep class="multi-status-item"><a href="javascript:" @click.prevent="$refs.multi_dlg.open = true">详细信息</a></span>
            </div>
            <div v-deep class="multi-status-bar">开始时间:&nbsp;<span v-text="multi.startTime"></span><span style="margin: 0 0.5em;">|</span><a href="#" style="margin-left: 0.5em;" @click.prevent="multi_cancel">结束</a></div>
            <resizable-widget ref="multi_dlg" style="width: 400px; height: 240px;">
                <widget-caption slot="widget-caption">
                    <span>详细信息</span>
                    <button data-id="CLOSE" style="float:right" data-exclude-bindmove @click="$refs.multi_dlg.open = false">x</button>
                </widget-caption>
                暂未实现
            </resizable-widget>
        </template>
    </ActivityBody>
    <style>
        .input-area>>> {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .input-area>>> {
            margin-bottom: 0.5em;
        }
        .input-area>>> .el-input, .input-area>>> .el-select {
            --el-input-width: auto;
            --el-select-width: auto;
        }
        .my-select-dialog>>> {
            width: var(--size); height: var(--size);
            --size: calc(100%);
            max-width: 100%; max-height: 100%;
            box-sizing: border-box;
            padding: 0;
            border: 0;
            z-index: 999;
            position: fixed;
            inset: 0;
        }
        dialog>>>::backdrop {
            transition: all 0.2s allow-discrete;
        }
        .multi-status-bar>>> {
            display: flex;
            align-items: center;
        } 
        .multi-status-item[v-deep]+.multi-status-item>>> {
            margin-left: 1em;
            border-left: 1px solid;
            padding-left: 1em;
        }
    </style>
</ActivityView>